<template>
    <div>
        <h3>房型列表</h3>
        房型名称
        <input type="text" v-model="can.name">
        房型面积
        <input type="text" v-model="can.a1">-<input type="text" v-model="can.a2">
        <input type="button" value="查询" class="btn btn-primary" @click="getShow">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>房型图片</td>
                    <td>单价</td>
                    <td>入住人数</td>
                    <td>是否有窗</td>
                    <td>平米</td>
                    <td>房型状态</td>
                    <td>操作</td>

                </tr>

                <tr v-for="item in data.list">
                    <td>{{ item.Name }}</td>
                    <td>
                        <img :src="item.Photo" width="150" height="100">
                    </td>
                    <td>{{ item.Price }}</td>
                    <td>{{ item.Count }}</td>
                    <td>{{ item.Iswiodow == 1 ? "是" : "否" }}</td>
                    <td>{{ item.Area }}</td>
                    <td>{{ item.State == 1 ? "以投放" : "未投放" }}</td>
                    <td>
                        <input type="button" value="删除" @click="del(item.Id)" class="btn btn-danger">

                        <input type="button" value="投放" v-if="item.State==0" @click="upd(item.Id,1)" class="btn btn-warning">
                        <input type="button" value="取消投放" v-if="item.State==1" @click="upd(item.Id,0)" class="btn btn-warning">
                    </td>

                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>共<b>{{ data.totalCount }}</b>条</span>
        <span>共<b>{{ data.totalPage }}</b>页</span>
        <span>当前第<b> {{ can.pageIndex }} /{{ data.totalPage }}</b>页</span>
        
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(can.pageIndex-1)">
        <input type="button" value="下一页" @click="gopage(can.pageIndex+1)">
        <input type="button" value="尾页" @click="gopage(data.totalPage)">
    </div>
</template>



<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { isTypeReferenceNode } from 'typescript';
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
let data: any = reactive({
    list: [],
    totalCount: 0,
    totalPage: 0
})
let can: any = reactive({
    pageIndex: 1,
    pageSize: 2,
    name: "",
    a1: "",
    a2: ""
})

onMounted(() => {
    getShow();
})

//删除
const del = (id: any) => {
    if (confirm('确定删除吗')) {
        axios({
            method: "delete",
            url: "/api/House/Del",
            params: {
                id: id
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('删除成功')
                    getShow();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }

}
//翻页
const gopage=(num:any)=>{
    if(num<1){
        can.pageIndex=1;
        return;
    }
    if(num>data.totalPage){
        can.pageIndex=data.totalPage;
        return;
    }
    can.pageIndex=num;
    getShow();
    return;
}

//修改
const upd = (id: any,state:any) => {
    if (confirm('确定修改吗')) {
        axios({
            method: "get",
            url: "/api/House/upd",
            params: {
                id: id,
                state:state
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert('修改成功')
                    getShow();
                }
            })
            .catch(err => {
                console.log(err);
            })
    }

}

let getShow = () => {
    axios({
        method: "get",
        url: "/api/House/ShowHouseType",
        params: can
    })
        .then(res => {
            console.log(res);
            data.list = res.data.list;
            data.totalCount=res.data.totalCount;
            data.totalPage=res.data.totalPage;
        })
        .catch(err => {
            console.log(err);
        })
}




</script>








<style scoped></style>